<!--
 * @Author: bigflower
 * @Date: 2022-04-07 15:11:10
 * @LastEditors: BigFlower
 * @LastEditTime: 2022-08-25 22:11:21
 * @Description: file content
 * @FilePath: \wochat-vue3-ts-pinia\src\views\chats\ChatPage.vue
-->
<template>
  <div class="main">
    <div class="contact-layout">
      <chat-search></chat-search>
      <ChatContacts
        class="contact-list"
      ></ChatContacts>
    </div>
    <div></div>
    <div class="detail">
      <ChatMessages ref="messagePanel"></ChatMessages>
    </div>
  </div>
</template>
<script lang="ts" setup>
import ChatContacts from '@/views/chats/ChatContacts.vue';
import ChatMessages from '@/views/chats/ChatMessages.vue';
import ChatSearch from '@/views/chats/ChatSearch.vue';

</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  background: lightgray;
  display: flex;

  .contact-layout {
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    padding-top: 6px;

    .contact-list {
      background: #e6e5e5;
      flex: 1;
      margin-top: 4px;
    }
  }
  .detail {
    flex: 1;
    padding-top: 10px;
    margin-left: 1px;
    background: #f5f5f5;
    border-radius: 0px 3px 3px 0px;
  }
}
</style>
